<template>
  <div>
    <el-table :data="tableData" border>
      <el-table-column label="订单号" prop="orderId"></el-table-column>
      <el-table-column label="顾客姓名" prop="customerName"></el-table-column>
      <el-table-column label="联系方式" prop="phoneNumber"></el-table-column>
      <el-table-column label="下单时间" prop="orderTime"></el-table-column>
      <el-table-column label="商品" prop="goods">
        <template v-slot="{ row }">
          <div v-for="(item, index) in row.goods" :key="index">
            <p>{{ item.name }}</p>
            <p>{{ item.price }}元</p>
            <p>数量：{{ item.quantity }}</p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          orderId: '20230001',
          customerName: '张三',
          phoneNumber: '13500000001',
          orderTime: '2023-06-01 12:00:00',
          goods: [
            { name: '拿铁咖啡', price: 18, quantity: 1 },
            { name: '蓝莓曲奇', price: 10, quantity: 2 },
          ],
        },
        // 其他订单数据...
      ],
    };
  },
};
</script>
